<script setup></script>
<!--字体特效 fontEffect-->
<template>
    <div class="fontEffect">
        <h1>特效1</h1>
        <div id="ui">
            <div class="text" v-for="i in 100" :key="i">MERRY CHRISTMAS</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
$fontSize: 10rem;
body {
    background: rgba(5, 10, 25, 1);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.fontEffect {
    background: rgba(5, 10, 25, 1);
    height: 100vh;
    color: #fff;
    overflow: hidden;
    //display: flex;
    //justify-content: center;
    //align-items: center;
}

#ui {
    //transform: rotateZ(-8deg);
    .text {
        position: absolute;
        font-size: $fontSize;
        color: #fff;
        line-height: $fontSize;
        //opacity: 0;
        font-family: 'Anton', sans-serif;
        font-weight: bold;
        //transform: translate(-50%, -50%);
        mix-blend-mode: screen;
        filter: blur(2px) contrast(5);
        letter-spacing: 1rem;

        @for $i from 0 through 100 {
            $key: $i + 1;
            &:nth-child(#{$key}) {
                $row: floor($i / 20);
                //color: rgba(random(155) + 100, random(155) + 100, random(55), 1); // 黄色
                //color: rgba(random(30), random(100), random(155) + 100, 1); // 蓝色
                //color: rgba(random(180), random(155), random(55) + 100, 1);// 紫色
                //color: rgba(random(155) + 100, random(55), random(55) + 100, 1); // 红色
                //color: rgba(random(30) + 100, random(155), random(20) + 100, 1); // 紫色
                //color: rgba(random(20), random(255), random(55), 1); // 绿色
                //color: rgba(random(50) + 200, random(255), random(55), 1); // 黄红
                color: rgba(random(55) + 200, random(155) + 100, random(20), 1); // 金色
                //color: rgba(random(255), random(255), random(255), 1); // 白色

                animation: clip#{$i} random(10000) + 10000ms ease-in-out infinite alternate;
                filter: blur(#{random(25) - 10}px);
                @keyframes clip#{$i} {
                    0% {
                        clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
                    }
                    25% {
                        clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
                    }
                    50% {
                        clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
                    }
                    75% {
                        clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
                    }
                    100% {
                        clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
                    }
                }
            }
        }
    }
}
</style>
